<template>
    <div class="add-goods">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/toadd' }">商品管理</el-breadcrumb-item>
                    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        
         <el-steps :active="active" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            <el-step title="步骤 4"></el-step>
            <el-step title="步骤 5"></el-step>
        </el-steps>
        <!-- 方法1 -->
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left" class="mt-20">
            <el-tab-pane label="基本信息" name="first">
                <el-form label-width="80px">
                    <el-form-item label="基本信息">
                        <el-input></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="second">商品参数</el-tab-pane>
            <el-tab-pane label="商品属性" name="third">商品属性</el-tab-pane>
            <el-tab-pane label="商品图片" name="fourth">商品图片</el-tab-pane>
            <el-tab-pane label="商品内容" name="fifth">商品内容</el-tab-pane>
        </el-tabs> -->
        <!-- 方法2 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left" class="mt-20">
            <el-tab-pane label="基本信息" name="1">
                <el-form label-width="80px">
                    <el-form-item label="基本信息">
                        <el-input></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="2">商品参数</el-tab-pane>
            <el-tab-pane label="商品属性" name="3">商品属性</el-tab-pane>
            <el-tab-pane label="商品图片" name="4">
                <el-upload
                class="upload-demo"
                action="http://localhost:8888/api/private/v1/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :headers="setHeader()"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="5">商品内容</el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
      return {
        active: 0,
        activeName: 'first'
      }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
            // //方法2
            this.active = Number(tab.name) - 1
            // //方法1
            // switch(tab.name) {
            //     case "first":
            //         this.active = 0
            //         break;
            //     case "second":
            //         this.active = 1
            //         break;
            //     case "third":
            //         this.active = 2
            //         break;
            //     case "fourth":
            //         this.active = 3
            //         break;
            //     default:
            //         this.active = 4
            //         break;
            // }
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(response, file, fileList){
            // console.log(response);
            // console.log(file);
            // console.log(fileList);
            if (response.meta.status === 200) {
                this.$message({
                    type: 'success',
                    message: response.meta.msg
                })
            }
            
        },
        setHeader(){
            let token = localStorage.getItem("mytoken")
            return {
                Authorization:token
            }
        }
    
    }
}
</script>
<style lang="scss" scoped>
.add-goods {
    .mt-20 {
        margin-top: 20px;
    }
}
</style>